<template>
	<view>
		<!--我的团队 -->
		
		<view class="bg-header" :style="{ paddingTop: iStatusBarHeight + 'px' }">
			<view class="cu-bar">
				<view class="action" @click="back()">
					<text class="wlIcon-fanhui1 text-white"></text>
				</view>
				<view class="content text-bold text-white">
					我的团队
				</view>
			</view>
		</view>
		
		<view class="header-blue">
			<view class="header-box">
				<view class="left-box">
					<view class="value">{{userNum.yj || 0}}</view>
					<view class="title">团队总业绩</view>
				</view>
				
				<view class="line"></view>
				
				<view class="right-box">
					<view class="value">{{userNum.num || 0}}</view>
					<view class="title">团队总人数</view>
				</view>
			</view>
		</view>
		
		<view class="body-box">
			<view class="body-header">
				<view class="body-title">团队明细</view>
				
				<view class="flex">
					<view :class="type === 0  ? 'type-box-active' : 'type-box'" @click="changeType(0)">直推</view>
					<view :class="type === 1  ? 'type-box-active' : 'type-box'" @click="changeType(1)">间推</view>
				</view>
			</view>
			
			
			<view class="list">
				<view class="item" v-for="(item,index) in dataList" :key="index">
					<view class="flex">
						<image :src="item.avatar"
						class="avatar-image"
						></image>
						
						<view class="flex flex-direction">
							<view class="title1 text-cut">{{item.nickname || ''}}</view>
							<view class="title2">ID:{{item.id || ''}} | 电话:{{item.mobile || ''}}</view>
							<view class="title3">{{item.jointime || ''}}</view>
						</view>
					</view>
					
					
					<view class="flex flex-direction">
						<view class="flex align-center">
							<view class="title4">团队总业绩</view>
							<view class="title5">{{item.yj || '0'}}</view>
						</view>
						
						<!-- <view class="choose-btn" v-if="item.px" @click="chooseUser(item.id)">选择节点人</view> -->
					</view>
				</view>
			</view>
			
		</view>
		
		
		<uni-load-more :status="status" :content-text="contentText" />
		
		
		<wanl-modal custom :show="showModal" width="93%" padding="0rpx">
			<view class="modal-body">
				
				<view class="flex align-center justify-center">
					<view class="flex align-center">
						<view class="black-line"></view>
						<view class="modal-title">选择节点人</view>
						<view class="black-line"></view>
					</view>
					
					<image src="/static/images/close.png" class="close-image" @click="closeModel"></image>
				</view>
				
				<view class="tips">选择确认节点人后，就不能再更改</view>
				
				<view class="flex justify-between">
					<view :class="curType ===0 ? 'choose-btn-active' : 'choose-btn2'" @click="changeCurType(0)">
						自然排位 
						<image src="/static/images/gou_bg.png" class="choose-bg-image" v-if="curType ===0"></image>
						<image src="/static/images/gou.png" class="choose-image" v-if="curType ===0"></image>
					</view>
					
					<view :class="curType ===1 ? 'choose-btn-active' : 'choose-btn2'" @click="changeCurType(1)">
						手动排位
						<image src="/static/images/gou_bg.png" class="choose-bg-image" v-if="curType ===1"></image>
						<image src="/static/images/gou.png" class="choose-image" v-if="curType ===1"></image>
					</view>
				</view>
				
				<view class="input-box">
					<view class="input-title">ID/手机号</view>
					<input placeholder="请填写节点人手机号/ID" v-model="mobile" placeholder-style='text-align:right'></input>
				</view>
				
				<view class="confirm-btn" @click="submit()">确认</view>
				
			</view>
		
		
		</wanl-modal>
		
		
	</view>
	
</template>

<script>
export default {
	data() {
		return {
			showModal:false,
			iStatusBarHeight: 0,
			type:0, //0 直推 1间推
			userNum:{},
			curUserId:0,
			curType:0, //0 自动排位 1手动排位
			mobile:'',
			
			dataList: [],
			reload: false, //判断是否上拉
			total: 0, //数据量
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'more',
			contentText: {
				contentdown: ' ',
				contentrefresh: '加载中',
				contentnomore: ''
			}
		}
	},
	onLoad() {
		this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight
		
		//#ifdef H5
		this.iStatusBarHeight = 36;
		//#endif
		
		this.getUserNum();
		this.loadData();
	},
	onPullDownRefresh() {
		this.current_page = 1;
		this.reload = true;
		this.loadData();
	},
	onReachBottom() {
		//判断是否最后一页
		if (this.current_page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.reload = false;
			this.current_page = this.current_page + 1; //页码+1
			this.status = 'loading';
			this.loadData();
		}
	},
	methods: {
		closeModel(){
			this.showModal = false;
		},
		getUserNum(){
			uni.request({
				url: '/user/myteam',
				method: 'GET',
				data: {
				},
				success: res => {
					uni.stopPullDownRefresh();
					this.userNum = res.data;
				}
			});
		},
		async loadData() {
			await uni.request({
				url: '/user/teamlist',
				method: 'GET',
				data: {
					page: this.current_page,
					type: this.type,
				},
				success: res => {
					uni.stopPullDownRefresh();
					this.dataList = this.reload ? res.data : this.dataList.concat(res.data);//数据 追加
				// 	this.total = res.data.total; //数据量
				// 	this.current_page = res.data.current_page; //当前页码
				// 	this.last_page = res.data.last_page; //总页码
				// 	this.status = res.data.total == 0 ? 'noMore' : 'more';
				}
			});
		},
		changeType(type){
			this.type = type;
			this.total = 0;
			this.current_page = 1;
			this.last_page = 1;
			this.dataList = [];
			this.loadData();
		},
		chooseUser(id){
			this.showModal = true;
			this.curUserId = id;
		},
		changeCurType(type){
			this.curType = type;
		},
		submit(){
			if(!this.mobile){
				this.$wanlshop.msg('节点人手机号/ID不能为空');
				return false;
			}
		
			uni.request({
				url: '/user/teampx',
				method: 'POST',
				data: {
					mobile: this.mobile,
					type: this.curType,
					id: this.curUserId,
				},
				success: res => {
					uni.stopPullDownRefresh();
					if(res.code == 1){
						this.$wanlshop.msg('选择节点人成功');
						this.showModal = false;
						this.current_page = 1;
						this.dataList = [];
						this.loadData();
					}else{
						this.$wanlshop.msg(res.msg);
					}
				}
			});
			
		},
		back(){
			uni.navigateBack({
				 delta: 1
			})
		}
	}
}	
</script>

<style lang="scss" scoped>
.header-box{
	width: 702rpx;
	height: 180rpx;
	background: #F4F7FE;
	border-radius: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-left: 24rpx;
}

.left-box{
	display:flex;
	flex-direction: column;
	width: 350rpx;
	align-items: center;
}

.right-box{
	display:flex;
	flex-direction: column;
	width: 350rpx;
	align-items: center;
}

.value{
	font-size: 44rpx;
	font-family: D-DIN Exp;
	font-weight: 400;
	color: #292929;
}

.title{
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #999999;
}

.line{
	width: 1rpx;
	height: 50rpx;
	background: #E6E6E6;
}

.body-box{
	width: 750rpx;
	background: #FFFFFF;
	border-radius: 20rpx 20rpx 0rpx 0rpx;
	padding: 41rpx 27rpx;
	margin-top: -20rpx;
}

.body-header{
	display: flex;
	justify-content: space-between;
}

.body-title{
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #292929;
}

.type-box-active{
	width: 96rpx;
	height: 48rpx;
	background: #366BEB;
	border-radius: 4rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 22rpx;
}

.type-box{
	width: 96rpx;
	height: 48rpx;
	background: #F7F7F7;
	border-radius: 4rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #999999;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 22rpx;
}

.item{
	display: flex;
	justify-content: space-between;
	border-bottom: 1rpx solid #EBEBEB;
	align-items: center;
	padding-top: 39rpx;
	padding-bottom: 39rpx;
}

.avatar-image{
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}

.title1{
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #292929;
}

.title2{
	font-size: 22rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #292929;
	margin-top: 19rpx;
}

.title3{
	font-size: 22rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #999999;
	margin-top: 18rpx;
}

.title4{
	font-size: 20rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #999999;
	margin-right: 16rpx;
}

.title5{
	font-size: 32rpx;
	font-family: D-DIN Exp;
	font-weight: 400;
	color: #F53938;
}

.choose-btn{
	width: 160rpx;
	height: 56rpx;
	border: 2px solid #366BEB;
	border-radius: 28rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #366BEB;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 19rpx;
}

.header-blue{
	background-color: #366BEB;   
	padding-top: 28rpx;
	margin-top: -2rpx;
}

.modal-body{
	background-color: #FFFFFF;
	border-radius: 20rpx;
	padding: 47rpx 28rpx 28rpx 28rpx;
}

.close-image{
	width: 42rpx;
	height: 42rpx;
	position: absolute;
	top: 28rpx;
	right: 28rpx;
}

.black-line{
	width: 32rpx;
	height: 3rpx;
	background: #292929;
}

.modal-title{
	font-size: 32rrpx;
	font-family: PingFang SC;
	font-weight: 700;
	color: #292929;
	margin-left: 14rpx;
	margin-right: 14rpx;
}

.tips{
	margin-top: 23rpx;
	margin-bottom: 50rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #999999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.choose-btn-active{
	width: 313rpx;
	height: 88rpx;
	background: #F6F9FF;
	border: 2px solid #366BEB;
	border-radius: 20rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #366BEB;
	line-height: 42rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.choose-image{
	width: 19rpx;
	height: 14rpx;
	position: absolute;
	right: 8rpx;
	bottom: 8rpx;
}

.choose-bg-image{
	width: 37rpx;
	height: 33rpx;
	position: absolute;
	right: -1rpx;
	bottom: -1rpx;
}

.choose-btn2{
	width: 313rpx;
	height: 88rpx;
	background: #F7F7F7;
	border-radius: 20rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #666666;
	line-height: 42rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.confirm-btn{
	width: 646rpx;
	height: 88rpx;
	background: #366BEB;
	border-radius: 20rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin-top: 49rpx;
}

.input-box{
	width: 646rpx;
	height: 88rpx;
	background: #FFFFFF;
	border: 1px solid #CCCCCC;
	border-radius: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0rpx 32rpx;
	margin-top: 50rpx;
	
	input{
		text-align: right;
	}
}

.bg-header{
	width: 750rpx;
	background: #366BEB;
}

</style>